<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style type="text/css">
        table {
            width: 120px;
        }

        button {
            height: 25px;
            width: 50px;
        }

        input {
            /* 文本右对齐 */
            text-align: right;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td colspan="3"><label for="panel"><input type="text" id="panel"></label></td>
        <td>
            <button id="left">&#8592</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>C</button>
        </td>
        <td>
            <button>(</button>
        </td>
        <td>
            <button>)</button>
        </td>
        <td>
            <button>%</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>7</button>
        </td>
        <td>
            <button>8</button>
        </td>
        <td>
            <button>9</button>
        </td>
        <td>
            <button>+</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>4</button>
        </td>
        <td>
            <button>5</button>
        </td>
        <td>
            <button>6</button>
        </td>
        <td>
            <button>-</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>1</button>
        </td>
        <td>
            <button>2</button>
        </td>
        <td>
            <button>3</button>
        </td>
        <td>
            <button>*</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>0</button>
        </td>
        <td>
            <button>.</button>
        </td>
        <td>
            <button>=</button>
        </td>
        <td>
            <button>/</button>
        </td>
    </tr>
</table>

<script type="text/javascript">
    let buttons = document.getElementsByTagName("button");
    /* 计算式，用于显示于面板上 */
    let calculation_formula = "";

    for (let i = 0; i < buttons.length; i++) {
        buttons[i].onclick = print;
    }

    function print() {
        /* 前者获取按键值，后者获取按键id */
        calculate(window.event.target.innerHTML, window.event.target.id);
    }

    function calculate(number, id) {
        calculation_formula += number;

        if (calculation_formula[0] === '0') {
            /* 当计算式第一个字符为0时，删除此字符。防止后续计算式不成立 */
            calculation_formula = calculation_formula.slice(1);
        }

        if (number === 'C') {
            calculation_formula = "0";
        }

        if (id === 'left') {
            /* 删除向左键和最后一个字符 */
            calculation_formula = calculation_formula.slice(0, -2);
        }

        if (number === '=') {
            /* 删除‘=’这个符号 */
            calculation_formula = calculation_formula.slice(0, -1);
            /* 进行计算 */
            calculation_formula = eval(calculation_formula);
            /* 判断任何数除以0的情况 */
            if (eval(calculation_formula) === Infinity) {
                calculation_formula = "NaN";
            }
        }
        document.getElementById("panel").value = calculation_formula;
    }
</script>
</body>
</html>